<template>
  <!-- 导航栏 -->
  <div class="nav">
    <div class="navv">
      <!--导航栏左侧  -->
      <div class="navleft">
        <img class="navleft-img" width="100%" src="@/assets/15.png" alt="" />
      </div>
      <!-- 导航栏右侧 -->
      <div class="navright">
        <div class="left">
          <input type="text" class="search" placeholder="搜索商品" />
          <img class="searchimg" src="@/assets/14.png" alt="" />
        </div>
        <div class="right" @click="goorder">
          <img width="100%" src="@/assets/13.png" alt="" />
        </div>
      </div>
    </div>
  </div>
  <!-- 轮播图 -->
  <div class="Carousel">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        ><img src="@/assets/轮播图01.png" alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img src="@/assets/轮播图01.png" alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img src="@/assets/轮播图01.png" alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img src="@/assets/轮播图01.png" alt=""
      /></van-swipe-item>
    </van-swipe>
  </div>
  <!-- 分类 -->
  <div class="classification">
    <div class="classi">
      <div class="classif">
        <div class="one1">
          <img src="@/assets/5.png" alt="" />
          <p>主粮</p>
        </div>
        <div class="one1">
          <img src="@/assets/8.png" alt="" />
          <p>零食</p>
        </div>
        <div class="one1">
          <img src="@/assets/9.png" alt="" />
          <p>日用</p>
        </div>
        <div class="one1">
          <img src="@/assets/2.png" alt="" />
          <p>玩具</p>
        </div>
      </div>
      <div class="classifi">
        <div class="one1">
          <img src="@/assets/7.png" alt="" />
          <p>医疗</p>
        </div>
        <div class="one1">
          <img src="@/assets/6.png" alt="" />
          <p>装扮</p>
        </div>
        <div class="one1">
          <img src="@/assets/3.png" alt="" />
          <p>品牌</p>
        </div>
        <div class="one1">
          <img src="@/assets/4.png" alt="" />
          <p>美容</p>
        </div>
      </div>
    </div>
  </div>
  <!-- 特价 -->
  <div class="commodity">
    <div class="tejia">
      <div class="te">特</div>
      <div class="tianian">
        <p class="tt">天天特价</p>
        <div class="daojishi">
          <van-count-down :time="time">
            <template #default="timeData">
              <span class="block">{{ timeData.hours }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.minutes }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.seconds }}</span>
            </template>
          </van-count-down>
        </div>
      </div>
    </div>

    <div class="item-undefined">
      <div class="items1">
        <div class="item-a" v-for="(item,index) in arr.data" :key="index">
          <a href="">
            <img class="items-img" :src="item.supplyImage" alt="" />
            <div class="pet">
              {{item.supplyName}}
              <p class="yuan">{{item.supplyPrice}}元</p>
            </div>
          </a>
        </div>
      </div>

      <div class="items2">
        <div class="item-a" v-for="(item,index) in arr.data" :key="index">
          <a href="">
            <img class="items-img" :src="item.supplyImage" alt="" />
            <div class="pet">
               {{item.supplyName}}
              <p class="yuan">{{item.supplyPrice}}元</p>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { shoop } from "@/api/shoop";
import { reactive, toRefs,onMounted, } from "vue";
import { ref } from "vue";
import { useRouter } from "vue-router";
export default {
  name: "IndexMall", //商城

  setup() {
    const time = ref(30 * 60 * 60 * 1000);
    let router = useRouter();
    function goorder() {
      router.push({
        name: "indexorders",
      });
    }

    let data = reactive({
        supplyId:0,
        classificationId:0,
        supplyName:'',
        descrption: 0,
        supplyPrice: 25,
        supplyImage: ""
    });
    let arr = reactive({
      data:[]
    })
    shoop(data).then((res) => {
      // console.log(res);
      arr.data = res
    }).catch(()=>{

    });

    onMounted(() => {
      shoop();
    });

    return {
      time,
      goorder,
      arr,
      data,
      ...toRefs(data),
    };
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.my-swipe .van-swipe-item {
  width: 100%;
  height: 18.75rem;
  color: #fff;
  font-size: 2rem;
  line-height: 9.3rem;
  text-align: center;
  background-color: #39a9ed;
}
.my-swipe .van-swipe-item img {
  width: 100%;
  height: 18.75rem;
}

.nav {
  width: 100%;
  height: 5rem;
  background-color: #878ecd;
}
.navv {
  height: 5rem;
  margin: 0 auto;
}
.navleft {
  width: 1.875rem;
  height: 1.875rem;
  margin-left: 1.25rem;
  margin-top: 1.5625rem;
  float: left;
}
.navleft img {
  width: 1.875rem;
  height: 1.875rem;
}
.navright {
  width: 19.875rem;
  height: 3.875rem;
  float: right;
  margin-top: 0.5625rem;
}
.left {
  width: 15.875rem;
  height: 3.875rem;
  float: left;
  margin-top: 0.5625rem;
}
.search {
  width: 16rem;
  height: 2.875rem;
  border-radius: 13px;
  border: 0;
  /* background-color: beige; */
}
.searchimg {
  width: 1.875rem;
  height: 1.875rem;
  position: absolute;
  margin-left: 13.325rem;
  margin-top: -2.275rem;
  color: gainsboro;
}
.search:hover {
  background-color: darkgrey;
}
.right {
  width: 1.875rem;
  height: 1.875rem;
  margin-top: 1.1rem;
  float: right;
  margin-left: 17rem;
  /* display: flex; */
  position: absolute;
}
.right img {
  width: 1.875rem;
  height: 1.875rem;
}
.Carousel {
  width: 100%;
  height: 18.75rem;
  /* background-color: #ff0000; */
}

.classification {
  height: 10.9375rem;
  background-color: rgb(251, 245, 245);
}
.classi {
  height: 10.9375rem;
  margin: 0 auto;
  margin-left: 0.5rem;
}
.classif {
  height: 5rem;
}
.classifi {
  margin-top: 0.4rem;
  height: 5rem;
}
.one1 {
  margin-top: 0.625rem;
  width: 3.125rem;
  height: 3.125rem;
  float: left;
  margin-left: 1.99rem;
  border-radius: 50%;
  background-color: #878ecd;
}
.one1 img {
  width: 1.875rem;
  height: 1.875rem;
  display: flex;
  text-align: center;
  margin: 0 auto;
  margin-top: 0.75rem;
}
p {
  margin-left: 0.5rem;
  margin-top: 0.4rem;
}
.commodity {
  height: 31.25rem;
  background-color: #eff0fd;
}
.tejia {
  height: 2.5rem;
  background-color: #fff;
}
.te {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #d6c313;
  color: white;
  font-size: 1.5625rem;
  text-align: center;
  float: left;
  margin-left: 0.8rem;
}
.tianian {
  width: 18.125rem;
  height: 2.5rem;
  display: flex;
}
.tt {
  width: 6.25rem;
  height: 2.5rem;
  font-size: 1.25rem;
  color: #d6c313;
}
.daojishi {
  width: 8.125rem;
  height: 2.5rem;
  display: flex;
  float: right;
}
.colon {
  display: inline-block;
  margin: 0 0.25rem;
  color: #000;
  margin-top: 0.825rem;
}
.block {
  display: inline-block;
  width: 1.075rem;
  height: 1rem;
  color: #fff;
  font-size: 0.75rem;
  text-align: center;
  border-radius: 0.3125rem;
  background-color: #4b4848;
}
.item-undefined {
  border-top: 1px solid #827f7f;
  /* background-color: #eebbbb; */
  height: 25rem;
}

.items1 {
  width: 100%;
  height: 11.875rem;
  border-top: 1px solid #827f7f;
  /* background-color: #d6c313; */
}
.items2 {
  width: 100%;
  height: 12.875rem;
}
.item-a {
  margin-top: 0.625rem;
  border: 1px solid gainsboro;
  width: 6.5rem;
  height: 10.875rem;
  float: left;
  margin-left: 1.3rem;
}
.items-img {
  width: 5.625rem;
  height: 8.125rem;
  margin-top: 20px;
  display: flex;
}
.pet {
  width: 6.15rem;
  height: 1.875rem;
  margin-top: 0.3125rem;
  font-size: 0.875rem;
  color: rgb(12, 12, 12);
  float: left;
  position: relative;
  left: .25rem;
}
.yuan {
  margin-top: 0.0375rem;
  float: right;
  color: red;
  font-size: 0.9375rem;
}
</style>